<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
    <g3vPlayer showTime :clockOptions="clockOptions" :viewerSource="viewerSource" :sliderOption="sliderOption" v-model:playing="playing" />
    <button style="position: absolute;top: 0; right: 0;" @click="onClick()"></button>
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { G3xWater } from '@g3vObjects';
import { MousePosition, viewerSettingSidebar, g3vPlayer } from '@g3x/g3v/ui';
import { g3a_groundImages } from '@g3x/g3a';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
        imageryProvider: null,
        // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false
      },
      layers: [
        // { type: 'tdtIboMap', options: { brightness: 1, show: true } },
        // { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
        // { type: 'darkMask', options: { brightness: 1, alpha: 0.85 } },
        { type: 'graticule', options: { brightness: 1, show: true } }
      ],
      globe: {
        shadows: Cesium.ShadowMode.DISABLED,
        depthTestAgainstTerrain: false,
        fog: false
        // enableLighting: true //启用以太阳为光源的地球
      },
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      hideLayers: false
    }
  ]
};

export default defineComponent({
  name: 'water', // 水面
  components: { SelectBox, SliderBar, viewerSettingSidebar, g3vPlayer, MousePosition },
  setup() {
    return { groundImages: null };
  },
  props: {},
  data() {
    return {
      playing: true,
      g3v: null,
      sliderOption: { min: 0, max: 3600 * 24, step: 1 }
    };
  },
  computed: {
    g3vViewer() {
      return this.g3v && this.g3v.g3vViewer$1;
    },
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    },
    clockOptions() {
      const clockRange = Cesium.ClockRange.LOOP_STOP;
      return { multiplier: 1, clockRange };
    }
  },
  watch: {},
  mounted() {
    console.log('groundImages mounted');
    this.initViewer();
  },
  beforeUnmount() {},
  unmounted() {
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions, () => {
        //Cesium 禁止相机进入地下
        vm.viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {
      let vm = this;
      const lyrDefine = {
        type: 'tileset',
        url: '//zzgis.com/cdn/3d/SampleData/earthSDK/dayanta/tileset.json',
        options: { name: 'dayanta', title: 'dayanta', brightness: 1, show: true }
      };

      vm.g3vViewer.addTileset(lyrDefine, (tileset, viewer) => {
        // const hpr = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
        // viewer.zoomTo(tileset, hpr);
        vm.setHeight = function(height) {
          height = Number(height);
          if (isNaN(height)) {
            return;
          }
          var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
          height -= cartographic.height;
          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0);
          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        };
        vm.setHeight(10);
      });
    },
    onClick(){
      let vm = this;
      const {g3vViewer,viewer,scene} = vm;
      console.log(0);
    },
    initEffects() {
      let vm = this;
      const {g3vViewer,viewer} = vm;

      const west = 1.90167174313679;
      const east = 1.9017293134629;
      const north = 0.5972732924673276;
      const south = 0.5972109534519064;

      const options = {
        height: 6.0,
        positions: [west,north,east,north,east,south,west,south]
      };
      let g3xWater = new G3xWater(g3vViewer, options);

      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(108.95966, 34.21828, 82),
        orientation: {
          heading: 5.88819,
          pitch: -0.68632,
          roll: 0.0
        }
      });
    }
  }
});
</script>

<style lang="less"></style>
